<template>
  <a-modal
    title="选择上会信息1111"
    :visible="visible"
    :closable="false"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    width="750px"
  >
    <div style="width: 100%;height:500px;">
      <a-form-model>
        <a-row :gutter="24">
          <a-col :span="24" v-for="(col,index) in columns" :key="index">
            <a-form-model-item
              :required="col.required"
              :label="col.label"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input :placeholder="col.msg" v-model="col.realname" @click="selectUser(col)" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <user-select ref="userSelect" @setResult="setResult" :origin-target-keys="originTargetKeys"/>
    </div>
  </a-modal>
</template>
<script>
import { strNotNull } from '@/utils/common.js'
export default {
  components: {
    UserSelect: () => import('@/components/tools/UserSelect'),
  },
  name: 'ProcessMeetSelect',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      currSel: {},
      originTargetKeys: []
    }
  },
  mounted() {},
  methods: {
    setResult(result) {
      if(this.currSel.min>result.length){
        this.$message.warning(this.currSel.msg,2);
        return;
      }
      var usernames = []
      var realnames = []
      if (result != null) {
        result.forEach((item) => {
          usernames.push(item.username)
          realnames.push(item.realname)
        })
      }
      this.currSel.username = usernames.join(',')
      this.currSel.realname = realnames.join(',')
    },
    selectUser(col) {
      this.currSel = col
      this.originTargetKeys = strNotNull(col.username) ? col.username.split(',') : []
      this.$refs.userSelect.doSelect()
    },
    doSelect() {
      this.visible = true
    },
    handleOk() {
      var flag = true
      this.columns.forEach((col) => {
        if (col.required && (!strNotNull(col.username) || !strNotNull(col.realname) || col.username.split(',').length<col.min)) {
          flag = false
          this.$message.warning(col.msg, 2)
          return
        }
      })
      if (flag) {
        this.visible = false
        this.$emit('selectMeetConfirm', this.columns)
      }
    },
    handleCancel() {
      this.columns.forEach((col) => {
        col.username = ''
        col.realname = ''
      })
      console.log(this.columns);
      this.visible = false
      this.$emit('selectUserConfirm', null)
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
</style>